<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="toback" />
        <div>{{title}}监督检查计划</div>
      </div>
    </header>
    <div class="contant">
      <!--
      <div class="luoshi-item">
        <div class="luoshi-head">
          <img src="../../assets/images/fz.png" />
          <div>执法办</div>
          <img src="../../assets/images/date.png" />
          <div>2020-12-10</div>
          <img src="../../assets/images/name.png" />
          <div>张三</div>
        </div>
        <div class="luoshi-body">
          <div class="luoshi-body-item">
            <div class="luoshi-body-item-key">对象:</div>
            <div class="luoshi-body-item-value">世纪花城小区(重庆金和物业公司)</div>
          </div>
          <div class="luoshi-body-item">
            <div class="luoshi-body-item-key">内容:</div>
            <div class="luoshi-body-item-value">监督加油站要定期开展自查评估，全面落实重大消防安全措施。</div>
          </div>
          <div class="luoshi-body-item">
            <div class="luoshi-body-item-key">附件:</div>
            <div class="luoshi-body-item-value"><div class="fj">XXXXX.doc</div><div class="fj">XXXXX.doc</div></div>
          </div>
        </div>
      </div>
      -->
      <div class="luoshi-item" v-for="(v,index) of ls_list" :keys="index">
        <div class="luoshi-head">
          <img src="../../assets/images/fz.png" />
          <div>{{v.dwname}}</div>
          <img src="../../assets/images/date.png" />
          <div>{{v.addTime}}</div>
          <img src="../../assets/images/name.png" />
          <div>{{v.username}}</div>
        </div>
        <div class="luoshi-body">
          <div class="luoshi-body-item">
            <div class="luoshi-body-item-key">对象:</div>
            <div class="luoshi-body-item-value">{{v.type}}</div>
          </div>
          <div class="luoshi-body-item">
            <div class="luoshi-body-item-key">内容:</div>
            <div class="luoshi-body-item-value">{{v.content}}</div>
          </div>
          <div class="luoshi-body-item">
            <div class="luoshi-body-item-key">附件:</div>
            <div class="luoshi-body-item-value"><div class="fj" v-for="(item,ind) of v.file" :keys="ind" @click="showFj(item)">{{(item.remark||item.remark===0)?item.remark:item.fileName}}</div></div>
          </div>
        </div>
      </div>
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="xcbs_box" v-for="(v,index) of list" :keys="index" @click="openDetail(v)">
          <div class="xcbs_child">
             <img class="img_persons" src="../../assets/images/logo5.png" />
            <div class="xcbs_suns">
              <div class="xcbs_tit">{{v.type}}</div>
              <div class="xcbs_sun">
                <img v-show="getStatus(v)=='黄灯'" class="yh_light" src="../../assets/images/jsd.gif" />
                <img v-show="getStatus(v)=='勾'" class="yh_light" src="../../assets/images/lg.png" />
                <img class="img_people" src="../../assets/images/people.png" />
                <div>{{v.username}}</div>
              </div>
            </div>
          </div>
          <div class="time">
            <div>{{checkNull(v.addTime)?'&nbsp;':v.addTime}}</div>
            <div>&nbsp;</div>
          </div>
        </div>

      </van-list>
    </div>
  </div>
</template>

<script>
  import utils from "../../assets/js/utils.js"
  export default {
    name: 'jdjc_list',
    data() {
      return {
        userId: null, //用户id
        luoshi_params:{},
        list: [],
        loading: false, //加载状态结束false
        finished: true, //全部加载完成true
        refreshing: false, //是否下拉加载 是true
        page:1,
        pageSize:50,
        title:'',
        ls_list:[],
        show_path:''
      }
    },
    methods: {
      toback() {
        this.$router.back()
      },
      getStatus(v){
        var str = '';
        if(v.isok===1){
          if(v.isRectifica===1||v.isRectifica===6){
            str = '勾';
          }else{
            str = '黄灯';
          }
        }else{
          str = '无';
        }
        return str;
      },
      getTime(time){
        return utils.dateFormat(time,'MM-DD');
      },
      checkFjType(info){
        var arr =  ['png','jpg','jpeg','bmp','gif','webp','psd','svg','tiff','txt','pdf','doc','docx','xls','xlsx','pptx'];
        var flag = false;
        if(info&&info.type){
          flag = arr.indexOf(info.type.toLowerCase())!==-1;
        }
        return flag;
      },
      showFj(item){//打开附件
        var path = this.show_path+item.path;
        var info = utils.getFileInfo(path);
        console.log(info);
        var flag = this.checkFjType(info);
        if(path&&info.name&&info.type&&info.fileExtension&&flag){
          try{
            var filename = new Date().getTime()+info.fileExtension;
            var waitingObj = plus.nativeUI.showWaiting("正在打开");
            var dtask = plus.downloader.createDownload(path, { filename: '_downloads/' + filename }, function(d, status){
              waitingObj.close();
              // 下载完成
              if(status == 200){
            			plus.runtime.openFile('_downloads/' + filename);
            		} else {
            			 console.log("Download failed: " + status);
            		}
            });
            dtask.addEventListener("statechanged", function (task, status) {
                if (!dtask) { return; }
                switch (task.state) {
                    case 1:
                        waitingObj.setTitle( "正在打开" );
                        break;
                    case 2:
                        waitingObj.setTitle( "正在打开" );
                        break;
                    case 3: // 已接收到数据
                        var progressVal = (task.downloadedSize / task.totalSize) * 100;
                        //psb1.progressbar({ progress: progressVal }).show();
                        //dstatus[0].innerHTML = task.downloadedSize + '/' + task.totalSize;
                        //hui.toast('下载进度：' + (task.downloadedSize + '/' + task.totalSize));
                        var progressStr = Number.parseInt(progressVal)+'% ';
                        console.log(progressStr);
                        waitingObj.setTitle(progressStr);
                        break;
                    case 4:
                        dtask = null;
                        waitingObj.setTitle( "0%" );
                        break;
                }
            });
            dtask.start();
          }catch(e){
            //TODO handle the exception
            console.log(e.message)
          }
        }
      },
      init(){
        var _this = this;
        _this.userId = localStorage.getItem("userId") //获取访问id
        _this.luoshi_params = sessionStorage.getItem("luoshi_params")?JSON.parse(sessionStorage.getItem("luoshi_params")):{};
        _this.title=_this.luoshi_params.title;
        _this.ls_list = [];
        _this.list = [];
        /*
        for(var n=0;n<2;n++){
          _this.ls_list.push({
            dw:'执法办',
            time:'2020-12-10',
            name:'张三',
            dx:'世纪花城小区(重庆金和物业公司)',
            content:'监督加油站要定期开展自查评估，全面落实重大消防安全措施。',
            arr:[{name:'XXXXX.doc',filePath:'/Content/TaskFile/94e81709-b680-4e69-9b6a-73c3128922941599098962566.doc'},{name:'XXXXX.doc',filePath:'/Content/TaskFile/94e81709-b680-4e69-9b6a-73c3128922941599098962566.doc'}]
          });
        }*/
        _this.finished = false;
        _this.refreshing = true;
        _this.loading = true;
        _this.onLoad();
      },
      getlist() {
        var _this = this;
        if (_this.refreshing) {
          _this.list = [];
          _this.ls_list = [];
          _this.page = 1;
          _this.refreshing = false;
        }
        /*setTimeout(function(){
          for(var n=0;n<20;n++){
            _this.list.push({
              unitsName:'渝中区康建玻璃经营部'+_this.page+'-'+n,
              ptPerson:'张三',
              niAddtime:'11-14'
            });
          }
          _this.loading = false;
          if(_this.list.length>=60){
            _this.finished = true;
          }else{
            _this.page++;
          }
        },100);
        return;*/
        /*try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }*/
        var url = _this.$global_msg.Url.host+'/Xx/selectThreeYearnLuoShiList1';
        var params = {
          logId:_this.luoshi_params.id,
          page:_this.page,
          rows:_this.pageSize,
          enterpriseId:_this.luoshi_params.enterpriseId,
          month:_this.luoshi_params.month,
          type:_this.luoshi_params.type
        };
        _this.axios.get(url,{params}).then(res => {
            console.log(res);
            if(res&&res.data){
              if(res.data.ls&&res.data.ls.length>0){
                for(var n=0;n<res.data.ls.length;n++){
                  if(res.data.ls[n].file&&res.data.ls[n].file.length>0){
                    for(var m=0;m<res.data.ls[n].file.length;m++){
                      res.data.ls[n].file[m].fileName = utils.getFileInfo(_this.show_path+res.data.ls[n].file[m].path).fileName;
                    }
                  }
                }
                _this.ls_list = res.data.ls;
              }
              if(res.data.gl&&res.data.gl.length>0){
                _this.list = _this.list.concat(res.data.gl);
                _this.page++;
              }else{
                _this.finished = true;
              }
            }else{
              _this.$toast('查询错误');
              _this.finished = true;
            }
            // 加载状态结束
            _this.loading = false;
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log(e.message);
            }
        }).catch(err=>{
             _this.$terminal._error(err)
          })
      },
      onLoad() {
        this.getlist()
      },
      checkNull(value){//检测是否为空
        if(value||value===0||value==='0'){
          return false;
        }else{
          return true;
        }
      },
      openDetail(v){
        sessionStorage.setItem("inspection_patrolTroubleshootId", v.ptId);
        sessionStorage.setItem("inspection_infoId", (v.infoId||v.infoId===0)?v.infoId:'');
        localStorage.setItem("hard_detail_from",'/luoshi_list');
        localStorage.setItem("luoshi_list_scrollTop",$('.contant').scrollTop());
        this.$router.push("/hard_detail");
      }
    },
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter (to, from, next) {
        next(vm => {
          var luoshi_list_scrollTop = localStorage.getItem("luoshi_list_scrollTop");
          if(vm.checkNull(luoshi_list_scrollTop)){//进入页面。刷新列表
            vm.init();
          }else{//从详情返回
            $('.contant').animate({scrollTop: luoshi_list_scrollTop}, 0);
            localStorage.removeItem("luoshi_list_scrollTop");
          }
        })
    },
    mounted() {
      document.body.style.backgroundColor = "#F7F7F9";
      this.show_path = this.$global_msg.Url.hosts+'';
    },
    created() {

    }
  }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }
 /* 头部开始 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .btn-change {
    position: absolute;
    left: 1.537037rem;
    font-size: 0.488888rem !important;
    bottom: 0px;
    top: 0.15rem;
    width: auto !important;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  /* 头部结束 */
  .contant{
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }
  .posi {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    top: 1.8519rem;
    width: 100%;
    background: #fff;
    z-index: 10;
  }

  .styles {
    display: inline-block;
    /* border: 1px solid blue; */
    width: 19.6%;
    font-size: 0.25rem;
    margin-bottom: 0.2rem;
  }

  .hdgd {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .hdgd div {
    display: inline-block;
  }

  .styles div {
    margin-top: 0.1rem;
  }

  .rvvee {
    width: 100%;
  }

  .stylebox {
    background: white;
    padding: 0.37037rem;
    box-sizing: border-box;
    /* border: 1px solid red; */
  }

  .img_log6 {
    width: 0.8rem;
    display: inline-block;
  }

  .img_people {
    width: 0.3519rem;
    margin-right: 0.2rem;
    height: 0.3519rem;
  }

  .xcbs_suns {
    width: 85%;
    /* border: 1px solid red; */
    margin-left: 0.3rem;
    margin-top: 0.15rem;
  }

  .xcbs_sun {
    display: flex;
    align-items: center;
    font-size: 0.296296rem;
    color: #999;
    margin-top: 0.092592rem;
  }

  .time {
    font-size: 0.35rem;
  }

  .xcbs_tit {
    font-size: 0.35rem;
    width: 100%;
    /* border: 1px solid red; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .img_persons {
    width: 0.6667rem;
    height: 0.7407rem;
  }

  .xcbs_child {
    /* border: 1px solid blue; */
    width: 85%;
    display: flex;
    align-items: center;
  }

  .listvr {
    margin-top: 0.2rem;
  }

  .xcbs_box {
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    border-radius: 0.15rem;
    align-items: center;
    background-color: white;
    padding: 0 0.4rem;
  }



  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .yh_light{
    width: 0.37037rem !important;
    height: 0.37037rem !important;
    margin-right: 0.2rem;
  }

  /*落实*/
  .luoshi-item{
    width: 100%;
    background-color: #FFFFFF;
    font-size: 0.35rem;
  }
  .luoshi-item:first-child{
    margin-top: 0.185185rem;
  }
  .luoshi-head{
    margin: 0 0.092592rem;
    width: auto;
    display: flex;
    align-items: center;
    padding: 0.37037rem 0;
    border-bottom: 1Px solid #DDDDDD;
  }
  .luoshi-head img{
    width: 0.648148rem;
    height: 0.648148rem;
    margin-right: 0.185185rem;
  }
  .luoshi-head img:first-child{
    margin-left: 0.277777rem;
  }
  .luoshi-head div{
    flex: 1;
    margin-right: 0.277777rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .luoshi-body{
    width: 100%;
    border-bottom: 1Px solid #DDDDDD;
  }
  .luoshi-body-item{
    width: 100%;
    display: flex;
    margin-top: 0.37037rem;
  }
  .luoshi-body-item:last-child{
    margin-bottom: 0.37037rem;
  }
  .luoshi-body-item-key{
    margin-left: 0.37037rem;
    width: 1rem;
  }
  .luoshi-body-item-value{
    color: #999;
    margin-right: 0.37037rem;
    flex: 1;
  }
  .luoshi-body-item-value .fj{
    margin-top: 0.092592rem;
    word-break: break-all;
  }
  .luoshi-body-item-value .fj:first-child{
    margin-top: 0;
  }
</style>
